<template>
  <div id="dialogAllLabel">
    <el-dialog
      title="全部标签"
      :visible.sync="dialogData.isShow"
      width="500px"
      :before-close="labelHandleClose"
    >
      <div class="content">
        <el-button
          class="tag-name"
          round
          v-for="(item, index) in allList"
          :key="item.labelId"
          >{{ item.labelName }}-{{ item.user.userName
          }}<i
            v-if="isAdmin || item.user.userId === dapengUserId"
            @click="remove(item, index)"
            class="el-icon-circle-close el-icon--right"
          ></i
        ></el-button>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" @click="cancelLabel">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { del } from '@/api/contentTags/content' // 接口
export default {
  name: 'dialogAllLabel',
  msg: '',
  props: ['dialogData', 'dapengUserId', 'isAdmin'],
  data() {
    return {
      allList: [] //已选中的全部标签
    }
  },
  mounted() {
    this.allList = this.dialogData.labels
  },
  methods: {
    /*删除隐性标签*/
    remove(item, index) {
      let {
        labelId,
        user: { userId: labelOperatorId }
      } = item
      let obj = {
        labelOperatorId,
        labelReason: ''
      }
      del(
        this.dialogData.id,
        labelId,
        obj,
        (response) => {
          this.$message.success('操作成功')
          this.allList.splice(index, 1) //避免页面刷新
          this.$emit('afterRemove')
        },
        (response) => {
          this.$message.warning(response.message)
        }
      )
    },
    labelHandleClose(done) {
      this.cancelLabel()
      done()
    },
    cancelLabel() {
      // 关闭前清空
      this.loading = false
      this.dialogData.id = ''
      this.dialogData.labels = []
      this.dialogData.isShow = false
    }
  }
}
</script>

<style lang="less">
#dialogAllLabel {
  .el-dialog__body {
    padding: 10px 20px 10px !important;
    .content {
      height: 140px;
      overflow: auto;
    }
  }
  .el-button {
    margin-right: 10px;
  }
  .el-button + .el-button {
    margin-left: 0;
  }
  button.el-button.tag-name {
    white-space: normal;
  }
}
</style>
